<template>
  <div>
    <div ref="chart" style="width: 100%; height: 60px"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.renderChart();
  },
  props: ['abilityEvalProgressList'],
  methods: {
    renderChart() {
      const chart = echarts.init(this.$refs.chart);
      const name = this.abilityEvalProgressList.map((item) => item.status);
      const itemStyle = [
        {
          normal: {
            barBorderRadius: [0, 10, 10, 0],
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 1,
                  color: '#151952', // 0% 处的颜色
                },
                {
                  offset: 0,
                  color: '#0E8BFF', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        {
          normal: {
            barBorderRadius: [0, 10, 10, 0],
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 1,
                  color: '#151952', // 0% 处的颜色
                },
                {
                  offset: 0,
                  color: '#1CDBFE', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        {
          normal: {
            barBorderRadius: [0, 10, 10, 0],
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 1,
                  color: '#151952', // 0% 处的颜色
                },
                {
                  offset: 0,
                  color: '#1CDBFE', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        {
          normal: {
            barBorderRadius: [0, 10, 10, 0],
            color: {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 1,
                  color: "#151952", // 0% 处的颜色
                },
                {
                  offset: 0,
                  color: "#87AF29", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ]
      const arr = []
      for (const i in this.abilityEvalProgressList) {
        const obj = {
          name: this.abilityEvalProgressList[i].status,
          type: 'bar',
          stack: '总量',
          barWidth: 15,
          label: {
            show:
              this.abilityEvalProgressList[i].statusNum === '0' ? false : true,
            position: 'inside',
            formatter: '{c}%', // 显示数据，以百分比形式
          },
          itemStyle: itemStyle[i],
          data: [
            (
              this.abilityEvalProgressList[i].statusNum /
              this.abilityEvalProgressList[i].totalNum
            ).toFixed(2) * 100,
          ],
        };

        arr.push(obj)
      }
      arr.push({
        type: "bar",
        stack: "总量",
        silent: true,
        barWidth: 20,
        itemStyle: {
          normal: {
            color: "rgba(0,0,0,0)",
          },
        },
        label: {
          show: true,
          position: "right",
          formatter: `${this.abilityEvalProgressList[0].totalNum}人`,
          color: "white",
          fontSize: 14,
        },
        data: [0], // 总人数
      });
      const option = {
        legend: {
          // type: 'circle',
          data: name,
          bottom: 5,
          left: 109,
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            color: 'rgba(79, 166, 247, 1)',
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#040737',
          borderColor: '#0E8BFF', // 设置边框颜色，这里是绿色
          borderWidth: 2, // 设置边框宽度，这里是2像素
          textStyle: {
            // 设置文本样式
            color: '#ffffff', // 设置文本颜色
            fontSize: 16, // 设置文本字体大小
          },
          axisPointer: {
            // 禁用轴线
            type: 'none',
          },
        },
        grid: {
          left: '5%',
          right: '10%',
          top: '10%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          type: 'category',
          data: ['能力评估'],
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: '#4FA6F7',
            fontSize: 14,
          },
          axisLine: {
            show: false,
          },
        },
        series: arr,
      };

      chart.setOption(option);
    },
  },
};
</script>
<style scoped lang="scss"></style>
